<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/doublebox-bootstrap.css">

    <!-- Javascript -->
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/doublebox-bootstrap.js"></script>
</head>
<body>
<h1>js配置写入选项</h1>
<div style="padding: 40px;border: 1px solid #F0F0F0;">
    <select id="doublebox2" name="doublebox" multiple="multiple" size="10">

    </select>
    <br/>
    <button id="get11">获取选中值</button>
    <button id="get22">获取选中的值（自定义排序）</button>
</div>
<script>
    $(function () {
        var $dSelect2 = $('#doublebox2');
        var $doublebox2 = $dSelect2.doublebox({
            nonSelectedListLabel: '可选择',
            selectedListLabel: '已选择',
            filterPlaceHolder: '搜索',
            moveSelectedLabel:'添加所选',
            moveAllLabel:'添加全部',
            removeSelectedLabel:'删除所选',
            removeAllLabel:'删除全部',
            preserveSelectionOnMove: 'moved',
            moveOnSelect: false,
            doubleMove: true,
            optionValue: "roleId",
            optionText: "roleName",
            nonSelectedList: [
                {
                    "roleId": "1",
                    "roleName": "张三"
                },
                {
                    "roleId": "2",
                    "roleName": "李四"
                },
                {
                    "roleId": "4",
                    "roleName": "张超"
                },
                {
                    "roleId": "5",
                    "roleName": "张大"
                },
                {
                    "roleId": "7",
                    "roleName": "赵六"
                },
                {
                    "roleId": "9",
                    "roleName": "韩梅梅"
                }
            ],
            selectedList: [
                {
                    "roleId": "3",
                    "roleName": "王五"
                },
                {
                    "roleId": "6",
                    "roleName": "赵云"
                },
                {
                    "roleId": "8",
                    "roleName": "李雷"
                }
            ]
        });

        $("#get11").on('click', function () {
            console.log($dSelect2.val());
        });

        $("#get22").on('click', function () {
            var selectedArr = $doublebox2.getSelectedOptions().split(','); //注意：同一页面如果有多个双选框，此方法会取到所有选中值
            console.log(selectedArr);
        });

    });
</script>
</body>
</html>